<template>
  <div class="visualization">
    <!-- 顶部标题 -->
    <div class="header">
      <div class="weather">
        <el-icon><Sunny /></el-icon>
        多云 32℃
      </div>
      <div class="title">数字工厂可视化大屏</div>
      <div class="time">{{ currentTime }}</div>
    </div>

    <div class="content">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <!-- 订单执行情况 -->
        <div class="panel-box">
          <div class="box-title">订单执行情况</div>
          <div class="order-stats">
            <div class="stat-item">
              <div class="label">今日接收订单</div>
              <div class="value">5<span>单</span></div>
            </div>
            <div class="stat-item">
              <div class="label">今日完成订单</div>
              <div class="value">7<span>单</span></div>
            </div>
            <div class="stat-item">
              <div class="label">接收交货期</div>
              <div class="value">90<span>天</span></div>
            </div>
          </div>
          <div class="trend-chart">
            <v-chart class="chart" :option="orderTrendOption" autoresize />
          </div>
        </div>

        <!-- 生产设备动态监测 -->
        <div class="panel-box">
          <div class="box-title">生产设备动态监测</div>
          <div class="device-stats">
            <div class="stat-grid">
              <div class="grid-item">
                <el-icon><Monitor /></el-icon>
                <div class="label">设备总量</div>
                <div class="value">5<span>台</span></div>
                <div class="sub-label">在线设备</div>
                <div class="sub-value">35台</div>
              </div>
              <div class="grid-item">
                <el-icon><Warning /></el-icon>
                <div class="label">设备报警数</div>
                <div class="value">3<span>台</span></div>
                <div class="sub-label">设备维修时间</div>
                <div class="sub-value">20小时/台</div>
              </div>
              <div class="grid-item">
                <el-icon><Connection /></el-icon>
                <div class="label">设备产能</div>
                <div class="value">70<span>%</span></div>
                <div class="sub-label">在线设备</div>
                <div class="sub-value">60台</div>
              </div>
              <div class="grid-item">
                <el-icon><Timer /></el-icon>
                <div class="label">设备运转率</div>
                <div class="value">3<span>%</span></div>
                <div class="sub-label">设备维修时间</div>
                <div class="sub-value">20小时/台</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 资金流动态监控 -->
        <div class="panel-box">
          <div class="box-title">资金流动态监控</div>
          <div class="finance-stats">
            <div class="circle-progress">
              <v-chart class="chart" :option="financeOption" autoresize />
            </div>
            <div class="finance-numbers">
              <div class="number-item">
                <div class="label">总资金</div>
                <div class="value">1000<span>万</span></div>
              </div>
              <div class="number-item">
                <div class="label">可用资金</div>
                <div class="value">500<span>万</span></div>
              </div>
              <div class="number-item">
                <div class="label">当月收入</div>
                <div class="value">750<span>万</span></div>
              </div>
              <div class="number-item">
                <div class="label">当月支出</div>
                <div class="value">550<span>万</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间3D场景 -->
      <div class="center-view">
        <div class="factory-model" ref="container"></div>
        <div class="control-buttons">
          <div class="button">生产管理</div>
          <div class="button">采购管理</div>
          <div class="button">物料管理</div>
          <div class="button">销售管理</div>
          <div class="button">仓储管理</div>
        </div>
      </div>

      <!-- 右侧面板 -->
      <div class="right-panel">
        <!-- 成本费用分析 -->
        <div class="panel-box">
          <div class="box-title">成本费用分析</div>
          <div class="cost-analysis">
            <div class="total-cost">
              <div class="cost-circle">
                <v-chart class="chart" :option="costOption" autoresize />
              </div>
              <div class="cost-numbers">
                <div class="number">
                  <div class="label">总成本</div>
                  <div class="value">475<span>万</span></div>
                </div>
                <div class="number">
                  <div class="label">基本费用</div>
                  <div class="value">500<span>万</span></div>
                </div>
                <div class="number">
                  <div class="label">其他费用</div>
                  <div class="value">25<span>万</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 智能仓储管理 -->
        <div class="panel-box">
          <div class="box-title">智能仓储管理</div>
          <div class="storage-stats">
            <div class="stat-item">
              <div class="label">原材料库存率</div>
              <div class="progress-bar">
                <el-progress :percentage="30" :show-text="false" />
                <span class="progress-value">30%</span>
              </div>
            </div>
            <div class="stat-item">
              <div class="label">物料利用率</div>
              <div class="progress-bar">
                <el-progress :percentage="25.2" :show-text="false" />
                <span class="progress-value">25.2%</span>
              </div>
            </div>
            <div class="stat-item">
              <div class="label">成品入库率</div>
              <div class="progress-bar">
                <el-progress :percentage="11.6" :show-text="false" />
                <span class="progress-value">11.6%</span>
              </div>
            </div>
            <div class="stat-item">
              <div class="label">成品出库率</div>
              <div class="progress-bar">
                <el-progress :percentage="8.6" :show-text="false" />
                <span class="progress-value">8.6%</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 员工考勤管理 -->
        <div class="panel-box">
          <div class="box-title">员工考勤管理</div>
          <div class="attendance">
            <div class="attendance-circle">
              <v-chart class="chart" :option="attendanceOption" autoresize />
            </div>
            <div class="attendance-list">
              <div class="list-item">
                <span class="label">应到人数</span>
                <span class="value">320</span>
              </div>
              <div class="list-item">
                <span class="label">打卡人数</span>
                <span class="value">318</span>
              </div>
              <div class="list-item">
                <span class="label">请假人数</span>
                <span class="value">2</span>
              </div>
              <div class="list-item">
                <span class="label">缺勤人数</span>
                <span class="value">0</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import panelBox from "./components/panel-box.vue";

defineOptions({
  name: "ScreenManage",
});
const container = ref(null);
let scene, camera, renderer, controls;

// 当前时间
const currentTime = ref(new Date().toLocaleTimeString());
setInterval(() => {
  currentTime.value = new Date().toLocaleTimeString();
}, 1000);

// 订单趋势图配置
const orderTrendOption = {
  grid: {
    top: 30,
    right: 20,
    bottom: 30,
    left: 40,
  },
  xAxis: {
    type: "category",
    data: ["9.1", "9.2", "9.3", "9.4", "9.5", "9.6", "9.7"],
    axisLine: {
      lineStyle: { color: "#4b5b85" },
    },
    axisLabel: { color: "#a2a3b7" },
  },
  yAxis: {
    type: "value",
    axisLine: {
      lineStyle: { color: "#4b5b85" },
    },
    axisLabel: { color: "#a2a3b7" },
  },
  series: [
    {
      data: [20, 32, 18, 34, 50, 60, 55],
      type: "line",
      smooth: true,
      lineStyle: {
        color: "#409EFF",
        width: 3,
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(64, 158, 255, 0.3)", // 渐变起始色
            },
            {
              offset: 1,
              color: "rgba(64, 158, 255, 0)", // 渐变结束色
            },
          ],
        },
      },
      symbol: "circle",
      symbolSize: 8,
    },
  ],
};

// 资金流图表配置
const financeOption = {
  series: [
    {
      type: "pie",
      radius: ["65%", "80%"],
      label: { show: false },
      data: [
        { value: 500, name: "原材料支出" },
        { value: 250, name: "运营支出" },
        { value: 250, name: "其他支出" },
      ],
    },
  ],
};

// 成本分析图表配置
const costOption = {
  series: [
    {
      type: "pie",
      radius: ["50%", "70%"],
      label: {
        show: true,
        position: "outside",
        formatter: "{b}: {d}%",
      },
      data: [
        { value: 60, name: "生产成本" },
        { value: 25, name: "运营成本" },
        { value: 15, name: "其他成本" },
      ],
    },
  ],
};

// 考勤图表配置
const attendanceOption = {
  series: [
    {
      type: "gauge",
      progress: { show: true },
      axisLine: { lineStyle: { width: 20 } },
      pointer: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
      detail: {
        valueAnimation: true,
        offsetCenter: [0, "0%"],
        fontSize: 30,
        formatter: "{value}%",
      },
      data: [{ value: 100 }],
    },
  ],
};

// 初始化3D场景
const initThree = () => {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    75,
    container.value.clientWidth / container.value.clientHeight,
    0.1,
    1000
  );

  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(container.value.clientWidth, container.value.clientHeight);
  container.value.appendChild(renderer.domElement);

  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;

  camera.position.z = 5;

  // 添加工厂模型（这里用简单几何体代替）
  const geometry = new THREE.BoxGeometry(2, 1, 1);
  const material = new THREE.MeshPhongMaterial({
    color: 0x409eff,
    transparent: true,
    opacity: 0.8,
  });
  const factory = new THREE.Mesh(geometry, material);
  scene.add(factory);

  // 添加环境光
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambientLight);

  // 添加平行光
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  directionalLight.position.set(5, 5, 5);
  scene.add(directionalLight);

  animate();
};

// 动画循环
const animate = () => {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
};

// 处理窗口大小变化
const handleResize = () => {
  if (camera && renderer && container.value) {
    camera.aspect = container.value.clientWidth / container.value.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(container.value.clientWidth, container.value.clientHeight);
  }
};

onMounted(() => {
  initThree();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  if (renderer) {
    renderer.dispose();
  }
  if (scene) {
    scene.clear();
  }
});
</script>

<style lang="scss" scoped>
@use "./index.scss" as *;
</style>
